<template>
    <div >
    <Row>
        <Col span="8">
       <Card dis-hover style="border-top:4px solid orange;margin-top:20px;">
            <p slot="title"style="text-align:center">联系人信息</p>
        <p>
        <Row> 
            <Col span="9"> 
               
                    <img :src="member.business_licence_pic" width="100%" height="100%" ></img>
                
            </Col>
            <Col span="14" offset="1">
            <p>姓名：{{member.name}}
            </br>职务：{{member.department}}
            </br>联系方式：{{member.mobile_phone}} </p>
            </Col>    
        </Row></p>
        </br>
        </Card>
        </br>
        <Card dis-hover style="border-top:4px solid orange;margin-top:20px;" >
        <p slot="title" style="text-align:center">认证信息</p>         
        <div>
            <Row> 
                <p style="text-align:center" >
                    <Col span="8">
                        <Button :type="member.is_mobile_phone_authed?'success':'ghost'" 
                            size="large" shape="circle" icon="android-phone-portrait"
                            :title="member.is_mobile_phone_authed?'手机已认证':'手机未认证'"></Button>
                            </br>
                            <p><b v-if="member.is_mobile_phone_authed==true">手机已认证</b><b v-if="member.is_mobile_phone_authed!=true">手机未认证</b></p>
                    </Col>
                    <Col span="8">
                        <Button :type="member.is_email_authed?'success':'ghost'" 
                            size="large" shape="circle" icon="ios-email"
                            :title="member.is_email_authed?'邮箱已认证':'邮箱未认证'"></Button>
                            </br>
                            <p><b v-if="member.is_email_authed==true">邮箱已认证</b><b v-if="member.is_email_authed!=true">邮箱未认证</b></p>
                        </Col>
                        <Col span="8">
                        <Button :type="member.status==2?'success':'ghost'" 
                            size="large" shape="circle" icon="card"
                            :title="member.status==2?'身份已认证':'身份未认证'"></Button>
                            </br>
                            <p><b v-if="member.status==2">身份已认证</b><b v-if="member.status!=2">身份未认证</b></p>
                        </Col>            
                </p>
            </Row>
        </div>              
        </Card>
        </br>
       <Card dis-hover style="border-top:4px solid orange;margin-top:20px;">
        <p slot="title" style="text-align:center">已申请平台服务</p>
        <p style="text-align:center;" v-for="item in member.successplateform" class="content">{{item.plateformservice_title}}</p>   
       </Card>
        </Col>
        <Col span="15" offset="1">
        <Card dis-hover style="border-top:4px solid orange;margin-top:20px;">
        <p slot="title" style="text-align:center"><b v-if="member.role_type == 4">企业信息</b></p>
           <p slot="title" style="text-align:center"><b v-if="member.role_type == 5">服务机构信息</b></p> 
           <div >              
                    <div style="text-align:center"><img :src="member.logo" width="40%" height="40%"></img></div>               
                    <p><b v-if="member.role_type == 4">企业名称：</b><b v-if="member.role_type == 5">服务机构名称： </b>{{member.enterprise_name}}</p>
                    <p><b v-if="member.role_type == 4">企业评分：</b><b v-if="member.role_type == 5">服务机构评分：</b><Rate v-if="member.rate" allow-half disabled show-text v-model="member.rate"></Rate><span v-if="!member.rate">暂无评分</span></p>
                    <p><b v-if="member.role_type == 4">企业简介：</b><b v-if="member.role_type == 5">服务机构简介： </b>{{formatContents(member.enterprise_profile)}}</p> 
            </div> 
        </Card></br>
        <div v-if="member.role_type == 5">
            <p style="text-align:center;font-weight:bold;font-size:20px;color:black"  >机构服务信息</p>
        <Card  v-for="item in itemList" class="content" >
                <router-link :to="{name:'service_detail',params:{id: item.id} }">
                   <p slot="title">                   
                            <h3 style="text-align:center;color:black">{{item.title}}</h3>
                </p>              
                <Row style="margin-top:20px;color:black"> 
                    <Col span="15">                  
                        <p><b>服务介绍：</b>{{formatContent(item.service_content)}}</p>
                    </Col>
                    <Col span="7" offset="2">                  
                        <p><b>服务对象：</b>{{item.service_people}}</p> 
                    </Col>                   
                </Row>
                </router-link>
            </Card>       
        </div>
        <div v-if="member.role_type == 4">
                 <p style="text-align:center;font-weight:bold;font-size:20px;"  >企业需求信息</p>       
        <Card  v-for="item in itemLists" class="content">
        <router-link :to="{name:'demand_detail',params:{id: item.id} }">
                <p  slot="title">                       
                            <h3 style="text-align:center;color:black">{{item.title}}</h3>
                </p>              
                <Row style="margin-top:20px;color:black"> 
                     <Col span="15">  
                        <p><b>需求内容：</b>{{formatContent(item.demand_content)}}</p>
                    </Col>
                    <Col span="7" offset="2">
                        <p><b>需求类型：</b>{{item.demand_type}}</p>
                   </Col>
                </Row>
                </router-link>
            </Card>
            
        </div>
        </Col>   
    </Row>   
</div>        
</template>
<script>
import Page from "@/common/model/Page";
export default {
    data() {   
        return {
            member: {},
            page:new Page("member/get_items",{id: this.$route.params.id}),
            pages:new Page("member/get_item",{id: this.$route.params.id}),
        }
    },
    methods:{
        formatContent(mes){
            if(mes.length>13){
                mes=mes.substring(0,50)+"……";
            }
            return mes;
        },
        formatContents(mes){
            if(mes.length>13){
                mes=mes.substring(0,300)+"……";
            }
            return mes;
        }

    },
    created() {
        this.api.post("member/get", { id: this.$route.params.id }, res => {
            this.member = res.data;
        });
        this.page.getData();
        this.pages.getData();
    },
    computed:{
        itemList(){
            return this.page.list;
        },
        itemLists(){
            return this.pages.list;
        },
    }
}; 
</script>
<style scoped>
    .content{
        margin-top: 5px;
        padding-bottom: 5px;
        color:black;
        
    }
    .line{
        margin: 40px 0;
        line-height: 1px ;
        border-left: 60px solid #333;
        border-right: 60px solid#333; 
       
    }
</style>
